<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        .boxa {
            background-color: burlywood;
            /* width: 300px; */
            width: 100%;
            height: 300px;
            position: absolute;
            top: 100px;
        }

        .boxb {
            background-color: rebeccapurple;
            /* width: 300px; */
            width: 100%;
            height: 300px;
            position: absolute;
            top: 100px;
        }
        
        .begin {
            opacity: 1;
            width: 300px;
            height: 300px;
        }
        .begin1 {
            opacity: 1;
            /* width: 300px;
            height: 300px; */
            transform: translateX(0px);
        }
        .begin2{
            opacity: 0;
            transform: translateX(200%);
        }

        .active {
            transition: all 3s ease;
        }

        .end {
            opacity: 0;
            width: 0px;
            height: 0px;
        }
        .end1 {
            opacity: 0;
            /* width: 0px;
            height: 0px; */
            transform: translateX(-100%);
        }
        .end2{
            opacity: 1;
            transform: translateX(0px);
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>父组件</h3>
        <input type="button" value="切换显示" @click=" flag=!flag ">
        <!-- 
            在vue容器中，如果需要对一个被vue语法控制的标签或者组件进行显示和隐藏时动画效果添加
            通过vue提供的全局组件 transition 或 transition-group 完成对标签或者组件的动画定义
            + 过渡组件会根据vue语法方式选择动画加载实际和方式
            + 过渡组件是对定义时包裹的元素或者其它组件进行动画添加
            + 过渡组件只完成时机的掌握，不会提供任何动画效果
            + 过渡组件需要自定义相关css执行动画
                - 元素或组件进入时动画
                    * enter-class="" 进入前的隐藏样式
                    * enter-active-class="" 进入过程中的动画样式
                    * enter-to-class="" 进入后的保留样式
                - 元素或组件离开时动画
                    * leave-class=""
                    * leave-active-class=""
                    * leave-to-class=""
         -->
        <!-- transition 组件仅用于单元素或单组件操作（可以标签嵌套） -->
        <!-- <transition
            enter-class="end"
            enter-active-class="active"
            enter-to-class="begin"
            leave-class="begin"
            leave-active-class="active"
            leave-to-class="end"
        >
            <div v-if="flag" class="boxa">
                <p>标签</p>
            </div>
        </transition> -->

        <!-- 
            transition-group 组件 用于多元素或多组件操作（可以标签嵌套）
            标签中的每一个子元素 都必须定义 唯一 key 属性
        -->
        <!-- <transition-group
            enter-class="begin2"
            enter-active-class="active"
            enter-to-class="end2"
            leave-class="begin1"
            leave-active-class="active"
            leave-to-class="end1"
        >
            <div v-if="flag" class="boxa" key="a">
                <p>标签</p>
            </div>
            <div v-if="!flag" class="boxb" key="b">
                <p>标签</p>
            </div>
        </transition-group> -->
        <hr>
        <!-- <input type="button" value="显示组件A" @click=" name='CompA' ">
        <input type="button" value="显示组件B" @click=" name='CompB' ">
        <transition
            enter-class="end"
            enter-active-class="active"
            enter-to-class="begin"
            leave-class="begin"
            leave-active-class="active"
            leave-to-class="end"
        >
            <component :is="name"></component>
        </transition> -->
        <input type="button" value="添加元素" @click=" arr.push(Math.random()) ">
        <transition-group
            enter-class="end"
            enter-active-class="active"
            enter-to-class="begin"
            leave-class="begin"
            leave-active-class="active"
            leave-to-class="end"
        >
            <p v-for="(item, index) in arr" :key="item">{{ item }}</p>
        </transition-group>
        
    </div>
    <template id="tempa">
        <div>
            <h3>组件A</h3>
        </div>
    </template>
    <template id="tempb">
        <div>
            <h3>组件B</h3>
        </div>
    </template>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            flag: true,
            name:"CompA",
            arr:[1,2,3,4,5]
        },
        components: {
            CompA: {
                template: "#tempa"
            },
            CompB: {
                template: "#tempb"
            }
        }
    });
</script>

</html>